<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2361038" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe775;</span>
                <div class="name">next</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe779;</span>
                <div class="name">tezhengchuli</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77a;</span>
                <div class="name">moxingpinggu</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77c;</span>
                <div class="name">prev</div>
                <div class="code-name">&amp;#xe77c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe776;</span>
                <div class="name">start-filled</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe777;</span>
                <div class="name">stop-line</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe778;</span>
                <div class="name">suanfamoxing</div>
                <div class="code-name">&amp;#xe778;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77b;</span>
                <div class="name">shangchuanwenjian</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77d;</span>
                <div class="name">out-line</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">menu-fold-line</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">menu-hide-line</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe774;</span>
                <div class="name">data-filled</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">image-line</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">invisible-filled</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">info-circle-line</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">Indent-list-line</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">invisible-2-filled</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">left-filled</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">left-most-filled</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">left-most-line</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">left-line</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">line-chart-line</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">invisible-line</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e1;</span>
                <div class="name">lock-line</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">mall-user-line</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">lock-filled</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">location-filled</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e5;</span>
                <div class="name">minus-circle-filled</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">minus-line</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">more-2-line</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">message-line</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">message-filled</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
                <div class="name">network-filled</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">minus-circle-line</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">more-filled</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">more-line</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">note-filled</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">network-line</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">note-line</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">organization-line</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">organization-filled</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">package-filled</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">package-receive-line</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">package-line</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">pie-chart-filled</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">pie-chart-line</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">play-circle-line</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">play-circle-filled</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">print-line</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">pass-text-line</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">ranking-filled</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">print-filled</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">push-line</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">receive-file-filled</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">ranking-line</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">receipts-line</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
                <div class="name">finance-filled</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
                <div class="name">copy-settings-line</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">favorite-text-line</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">receive-filled</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">freeze-circle-line</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">receive-line</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
                <div class="name">push-filled</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">finance-line</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">release-line</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">relation-line</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">reload-line</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">reset-time-line</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">invisible-2-line</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">invalid-text-line</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe712;</span>
                <div class="name">reset-line</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">receipts-filled</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">location-line</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">refresh-select-line</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">move-line</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">organization-text-line</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">package-end-line</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">right-line</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">receive-file-line</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">save-filled</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">package-return-line</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">package-search-line</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">save-line</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">search-line</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">seal-filled</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">seal-line</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">screenshot-line</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">package-select-line</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">sell-line</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
                <div class="name">sell-filled</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe726;</span>
                <div class="name">sound_mute-filled</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe727;</span>
                <div class="name">sound_mute-line</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
                <div class="name">refresh-all-line</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">spin-line</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">special_right-filled</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72b;</span>
                <div class="name">stopwatch-filled</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72c;</span>
                <div class="name">success-line</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">sound-line</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">table-line</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">text-filled</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">stopwatch-line</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe731;</span>
                <div class="name">text-line</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe732;</span>
                <div class="name">theme-filled</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe733;</span>
                <div class="name">truck-filled</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe734;</span>
                <div class="name">unordered-list-line</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe735;</span>
                <div class="name">unlock-filled</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">undo-line</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">refresh-cache-line</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe738;</span>
                <div class="name">video-line</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">voice-filled</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73a;</span>
                <div class="name">unlock-line</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">warning-circle-filled</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">voice-mute-filled</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">voice-line</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73e;</span>
                <div class="name">warning-text-line</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73f;</span>
                <div class="name">zoom-in-filled</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe740;</span>
                <div class="name">zoom-in-line</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">zoom-out-line</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">zoom-out-filled</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">right-most-line</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">search-filled</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">share-line</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe746;</span>
                <div class="name">star-filled</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">star-line</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe748;</span>
                <div class="name">sort-filled</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe749;</span>
                <div class="name">sync-filled</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74a;</span>
                <div class="name">return-text-line</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">up-filled</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74c;</span>
                <div class="name">up-line</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">sand-clock-filled</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74e;</span>
                <div class="name">warning-circle-line</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">right-most-filled</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe750;</span>
                <div class="name">shopping-cart-line</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe751;</span>
                <div class="name">sound-filled</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe752;</span>
                <div class="name">search-text-line</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe753;</span>
                <div class="name">sync-line</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe754;</span>
                <div class="name">theme-line</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe755;</span>
                <div class="name">tool-filled</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe756;</span>
                <div class="name">separate-line</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe757;</span>
                <div class="name">tool-line</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe758;</span>
                <div class="name">settings-filled</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">settings-line</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75a;</span>
                <div class="name">setting-text-line</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75b;</span>
                <div class="name">table-filled</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75c;</span>
                <div class="name">upload-line</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75d;</span>
                <div class="name">video-filled</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">refresh-text-line</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75f;</span>
                <div class="name">upload-text-line</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe760;</span>
                <div class="name">spreadsheet-filled</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe761;</span>
                <div class="name">warehouse-search-line</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe762;</span>
                <div class="name">update-line</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe763;</span>
                <div class="name">traffic-return-line</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe764;</span>
                <div class="name">transition-line</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe765;</span>
                <div class="name">truck-line</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">add-user-line</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe766;</span>
                <div class="name">shopping-cart-filled</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">add-line</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe767;</span>
                <div class="name">submit-text-line</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">add-circle-line</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe768;</span>
                <div class="name">share-text-line</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">arrow-down-filled</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe769;</span>
                <div class="name">supply-chain-line</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">arrow-down-line</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">text-help-line</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">arrow-left-line</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">shopping-cart-text-line</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">authorization-filled</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">spreadsheet-line</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">arrow-up-line</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76d;</span>
                <div class="name">tool-text-line</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">authorization-line</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76e;</span>
                <div class="name">voice-mute-line</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">arrow-up-filled</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76f;</span>
                <div class="name">view-text-line</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">arrow-right-line</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">rollback-text-line</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">avatar-filled</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe771;</span>
                <div class="name">workbench-filled</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">add-circle-filled</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe772;</span>
                <div class="name">right-filled</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">attach-line</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe773;</span>
                <div class="name">sand-clock-line</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">arrow-right-filled</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">add-sell-line</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">arrow-left-filled</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">avatar-line</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">add-text-line</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">abandon-cance-line</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">apply-save-line</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">bar-chart-line</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">bell-filled</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">bell-line</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">bell-mute-filled</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">bell-mute-line</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">calendar-filled</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">camera-line</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">camera-filled</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">calendar-line</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">change-pass-line</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">change-user-line</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">check-circle-filled</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">check-circle-line</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">clear-line</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">close-circle-line</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">column-list-line</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">close-circle-filled</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">clock-filled</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">column-list-filled</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">clock-line</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">code-line</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">compass-filled</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">copy-line</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">compass-line</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">contacts-filled</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">community-filled</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">copy-filled</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">dash-board-filled</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">create-invoice-filled</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">create-invoice-line</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">customer-service-line</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">community-line</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">contacts-line</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">bill-text-line</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">delete-filled</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">change-network-line</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">change-pass-filled</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">delete-line</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">disable-circle-line</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">disable-circle-filled</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">clear-filled</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">double-left-line</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">dot-chart-line</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">disable-text-line</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">double-right-filled</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">double-left-filled</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">copy-receipts-filled</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">data-check-line</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">data-check-filled</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">copy-receipts-line</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">down-filled</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">double-right-line</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">down-line</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">download-line</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">dash-board-line</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">copy-settings-filled</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">edit-filled</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">edit-text-line</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">email-filled</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">email-line</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">edit-line</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">file-filled</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">file-line</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">failure-line</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">favorite-filled</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bc;</span>
                <div class="name">favorite-line</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
                <div class="name">exchange-line</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">export-line</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">filter-filled</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">filler-line</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c1;</span>
                <div class="name">fold-line</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c2;</span>
                <div class="name">folder-line</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c3;</span>
                <div class="name">delete-user-line</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
                <div class="name">folder-filled</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">folder-open-filled</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">folder-open-line</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">date-time-line</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
                <div class="name">form-filled</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c9;</span>
                <div class="name">freeze-circle-filled</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">help-circle-filled</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
                <div class="name">form-line</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">hierarchical-list-filled</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">help-circle-line</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">half-star-filled</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
                <div class="name">home-filled</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
                <div class="name">hierarchical-list-line</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
                <div class="name">image-filled</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">Indent-list-filled</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">home-line</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
                <div class="name">import-line</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">info-circle-filled</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-next"></span>
            <div class="name">
              next
            </div>
            <div class="code-name">.icon-next
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tezhengchuli"></span>
            <div class="name">
              tezhengchuli
            </div>
            <div class="code-name">.icon-tezhengchuli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moxingpinggu"></span>
            <div class="name">
              moxingpinggu
            </div>
            <div class="code-name">.icon-moxingpinggu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-prev"></span>
            <div class="name">
              prev
            </div>
            <div class="code-name">.icon-prev
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-start-filled"></span>
            <div class="name">
              start-filled
            </div>
            <div class="code-name">.icon-start-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stop-line"></span>
            <div class="name">
              stop-line
            </div>
            <div class="code-name">.icon-stop-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suanfamoxing"></span>
            <div class="name">
              suanfamoxing
            </div>
            <div class="code-name">.icon-suanfamoxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuanwenjian"></span>
            <div class="name">
              shangchuanwenjian
            </div>
            <div class="code-name">.icon-shangchuanwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-out-line"></span>
            <div class="name">
              out-line
            </div>
            <div class="code-name">.icon-out-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-menu-fold-line"></span>
            <div class="name">
              menu-fold-line
            </div>
            <div class="code-name">.icon-menu-fold-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-menu-hide-line"></span>
            <div class="name">
              menu-hide-line
            </div>
            <div class="code-name">.icon-menu-hide-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-data-filled"></span>
            <div class="name">
              data-filled
            </div>
            <div class="code-name">.icon-data-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-image-line"></span>
            <div class="name">
              image-line
            </div>
            <div class="code-name">.icon-image-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-invisible-filled"></span>
            <div class="name">
              invisible-filled
            </div>
            <div class="code-name">.icon-invisible-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info-circle-line"></span>
            <div class="name">
              info-circle-line
            </div>
            <div class="code-name">.icon-info-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Indent-list-line"></span>
            <div class="name">
              Indent-list-line
            </div>
            <div class="code-name">.icon-Indent-list-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-invisible-2-filled"></span>
            <div class="name">
              invisible-2-filled
            </div>
            <div class="code-name">.icon-invisible-2-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-left-filled"></span>
            <div class="name">
              left-filled
            </div>
            <div class="code-name">.icon-left-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-left-most-filled"></span>
            <div class="name">
              left-most-filled
            </div>
            <div class="code-name">.icon-left-most-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-left-most-line"></span>
            <div class="name">
              left-most-line
            </div>
            <div class="code-name">.icon-left-most-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-left-line"></span>
            <div class="name">
              left-line
            </div>
            <div class="code-name">.icon-left-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-line-chart-line"></span>
            <div class="name">
              line-chart-line
            </div>
            <div class="code-name">.icon-line-chart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-invisible-line"></span>
            <div class="name">
              invisible-line
            </div>
            <div class="code-name">.icon-invisible-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock-line"></span>
            <div class="name">
              lock-line
            </div>
            <div class="code-name">.icon-lock-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mall-user-line"></span>
            <div class="name">
              mall-user-line
            </div>
            <div class="code-name">.icon-mall-user-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock-filled"></span>
            <div class="name">
              lock-filled
            </div>
            <div class="code-name">.icon-lock-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-location-filled"></span>
            <div class="name">
              location-filled
            </div>
            <div class="code-name">.icon-location-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minus-circle-filled"></span>
            <div class="name">
              minus-circle-filled
            </div>
            <div class="code-name">.icon-minus-circle-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minus-line"></span>
            <div class="name">
              minus-line
            </div>
            <div class="code-name">.icon-minus-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more-2-line"></span>
            <div class="name">
              more-2-line
            </div>
            <div class="code-name">.icon-more-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-message-line"></span>
            <div class="name">
              message-line
            </div>
            <div class="code-name">.icon-message-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-message-filled"></span>
            <div class="name">
              message-filled
            </div>
            <div class="code-name">.icon-message-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-network-filled"></span>
            <div class="name">
              network-filled
            </div>
            <div class="code-name">.icon-network-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minus-circle-line"></span>
            <div class="name">
              minus-circle-line
            </div>
            <div class="code-name">.icon-minus-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more-filled"></span>
            <div class="name">
              more-filled
            </div>
            <div class="code-name">.icon-more-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more-line"></span>
            <div class="name">
              more-line
            </div>
            <div class="code-name">.icon-more-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-note-filled"></span>
            <div class="name">
              note-filled
            </div>
            <div class="code-name">.icon-note-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-network-line"></span>
            <div class="name">
              network-line
            </div>
            <div class="code-name">.icon-network-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-note-line"></span>
            <div class="name">
              note-line
            </div>
            <div class="code-name">.icon-note-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-organization-line"></span>
            <div class="name">
              organization-line
            </div>
            <div class="code-name">.icon-organization-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-organization-filled"></span>
            <div class="name">
              organization-filled
            </div>
            <div class="code-name">.icon-organization-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-package-filled"></span>
            <div class="name">
              package-filled
            </div>
            <div class="code-name">.icon-package-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-package-receive-line"></span>
            <div class="name">
              package-receive-line
            </div>
            <div class="code-name">.icon-package-receive-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-package-line"></span>
            <div class="name">
              package-line
            </div>
            <div class="code-name">.icon-package-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pie-chart-filled"></span>
            <div class="name">
              pie-chart-filled
            </div>
            <div class="code-name">.icon-pie-chart-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pie-chart-line"></span>
            <div class="name">
              pie-chart-line
            </div>
            <div class="code-name">.icon-pie-chart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-play-circle-line"></span>
            <div class="name">
              play-circle-line
            </div>
            <div class="code-name">.icon-play-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-play-circle-filled"></span>
            <div class="name">
              play-circle-filled
            </div>
            <div class="code-name">.icon-play-circle-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-print-line"></span>
            <div class="name">
              print-line
            </div>
            <div class="code-name">.icon-print-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pass-text-line"></span>
            <div class="name">
              pass-text-line
            </div>
            <div class="code-name">.icon-pass-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ranking-filled"></span>
            <div class="name">
              ranking-filled
            </div>
            <div class="code-name">.icon-ranking-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-print-filled"></span>
            <div class="name">
              print-filled
            </div>
            <div class="code-name">.icon-print-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-push-line"></span>
            <div class="name">
              push-line
            </div>
            <div class="code-name">.icon-push-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-receive-file-filled"></span>
            <div class="name">
              receive-file-filled
            </div>
            <div class="code-name">.icon-receive-file-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ranking-line"></span>
            <div class="name">
              ranking-line
            </div>
            <div class="code-name">.icon-ranking-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-receipts-line"></span>
            <div class="name">
              receipts-line
            </div>
            <div class="code-name">.icon-receipts-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-finance-filled"></span>
            <div class="name">
              finance-filled
            </div>
            <div class="code-name">.icon-finance-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy-settings-line"></span>
            <div class="name">
              copy-settings-line
            </div>
            <div class="code-name">.icon-copy-settings-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favorite-text-line"></span>
            <div class="name">
              favorite-text-line
            </div>
            <div class="code-name">.icon-favorite-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-receive-filled"></span>
            <div class="name">
              receive-filled
            </div>
            <div class="code-name">.icon-receive-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-freeze-circle-line"></span>
            <div class="name">
              freeze-circle-line
            </div>
            <div class="code-name">.icon-freeze-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-receive-line"></span>
            <div class="name">
              receive-line
            </div>
            <div class="code-name">.icon-receive-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-push-filled"></span>
            <div class="name">
              push-filled
            </div>
            <div class="code-name">.icon-push-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-finance-line"></span>
            <div class="name">
              finance-line
            </div>
            <div class="code-name">.icon-finance-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-release-line"></span>
            <div class="name">
              release-line
            </div>
            <div class="code-name">.icon-release-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-relation-line"></span>
            <div class="name">
              relation-line
            </div>
            <div class="code-name">.icon-relation-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reload-line"></span>
            <div class="name">
              reload-line
            </div>
            <div class="code-name">.icon-reload-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reset-time-line"></span>
            <div class="name">
              reset-time-line
            </div>
            <div class="code-name">.icon-reset-time-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-invisible-2-line"></span>
            <div class="name">
              invisible-2-line
            </div>
            <div class="code-name">.icon-invisible-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-invalid-text-line"></span>
            <div class="name">
              invalid-text-line
            </div>
            <div class="code-name">.icon-invalid-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reset-line"></span>
            <div class="name">
              reset-line
            </div>
            <div class="code-name">.icon-reset-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-receipts-filled"></span>
            <div class="name">
              receipts-filled
            </div>
            <div class="code-name">.icon-receipts-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-location-line"></span>
            <div class="name">
              location-line
            </div>
            <div class="code-name">.icon-location-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh-select-line"></span>
            <div class="name">
              refresh-select-line
            </div>
            <div class="code-name">.icon-refresh-select-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-move-line"></span>
            <div class="name">
              move-line
            </div>
            <div class="code-name">.icon-move-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-organization-text-line"></span>
            <div class="name">
              organization-text-line
            </div>
            <div class="code-name">.icon-organization-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-package-end-line"></span>
            <div class="name">
              package-end-line
            </div>
            <div class="code-name">.icon-package-end-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-right-line"></span>
            <div class="name">
              right-line
            </div>
            <div class="code-name">.icon-right-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-receive-file-line"></span>
            <div class="name">
              receive-file-line
            </div>
            <div class="code-name">.icon-receive-file-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-save-filled"></span>
            <div class="name">
              save-filled
            </div>
            <div class="code-name">.icon-save-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-package-return-line"></span>
            <div class="name">
              package-return-line
            </div>
            <div class="code-name">.icon-package-return-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-package-search-line"></span>
            <div class="name">
              package-search-line
            </div>
            <div class="code-name">.icon-package-search-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-save-line"></span>
            <div class="name">
              save-line
            </div>
            <div class="code-name">.icon-save-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search-line"></span>
            <div class="name">
              search-line
            </div>
            <div class="code-name">.icon-search-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-seal-filled"></span>
            <div class="name">
              seal-filled
            </div>
            <div class="code-name">.icon-seal-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-seal-line"></span>
            <div class="name">
              seal-line
            </div>
            <div class="code-name">.icon-seal-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-screenshot-line"></span>
            <div class="name">
              screenshot-line
            </div>
            <div class="code-name">.icon-screenshot-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-package-select-line"></span>
            <div class="name">
              package-select-line
            </div>
            <div class="code-name">.icon-package-select-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sell-line"></span>
            <div class="name">
              sell-line
            </div>
            <div class="code-name">.icon-sell-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sell-filled"></span>
            <div class="name">
              sell-filled
            </div>
            <div class="code-name">.icon-sell-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sound_mute-filled"></span>
            <div class="name">
              sound_mute-filled
            </div>
            <div class="code-name">.icon-sound_mute-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sound_mute-line"></span>
            <div class="name">
              sound_mute-line
            </div>
            <div class="code-name">.icon-sound_mute-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh-all-line"></span>
            <div class="name">
              refresh-all-line
            </div>
            <div class="code-name">.icon-refresh-all-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-spin-line"></span>
            <div class="name">
              spin-line
            </div>
            <div class="code-name">.icon-spin-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-special_right-filled"></span>
            <div class="name">
              special_right-filled
            </div>
            <div class="code-name">.icon-special_right-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stopwatch-filled"></span>
            <div class="name">
              stopwatch-filled
            </div>
            <div class="code-name">.icon-stopwatch-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-success-line"></span>
            <div class="name">
              success-line
            </div>
            <div class="code-name">.icon-success-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sound-line"></span>
            <div class="name">
              sound-line
            </div>
            <div class="code-name">.icon-sound-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-table-line"></span>
            <div class="name">
              table-line
            </div>
            <div class="code-name">.icon-table-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-text-filled"></span>
            <div class="name">
              text-filled
            </div>
            <div class="code-name">.icon-text-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stopwatch-line"></span>
            <div class="name">
              stopwatch-line
            </div>
            <div class="code-name">.icon-stopwatch-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-text-line"></span>
            <div class="name">
              text-line
            </div>
            <div class="code-name">.icon-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-theme-filled"></span>
            <div class="name">
              theme-filled
            </div>
            <div class="code-name">.icon-theme-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-truck-filled"></span>
            <div class="name">
              truck-filled
            </div>
            <div class="code-name">.icon-truck-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unordered-list-line"></span>
            <div class="name">
              unordered-list-line
            </div>
            <div class="code-name">.icon-unordered-list-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlock-filled"></span>
            <div class="name">
              unlock-filled
            </div>
            <div class="code-name">.icon-unlock-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-undo-line"></span>
            <div class="name">
              undo-line
            </div>
            <div class="code-name">.icon-undo-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh-cache-line"></span>
            <div class="name">
              refresh-cache-line
            </div>
            <div class="code-name">.icon-refresh-cache-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video-line"></span>
            <div class="name">
              video-line
            </div>
            <div class="code-name">.icon-video-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-voice-filled"></span>
            <div class="name">
              voice-filled
            </div>
            <div class="code-name">.icon-voice-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlock-line"></span>
            <div class="name">
              unlock-line
            </div>
            <div class="code-name">.icon-unlock-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warning-circle-filled"></span>
            <div class="name">
              warning-circle-filled
            </div>
            <div class="code-name">.icon-warning-circle-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-voice-mute-filled"></span>
            <div class="name">
              voice-mute-filled
            </div>
            <div class="code-name">.icon-voice-mute-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-voice-line"></span>
            <div class="name">
              voice-line
            </div>
            <div class="code-name">.icon-voice-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warning-text-line"></span>
            <div class="name">
              warning-text-line
            </div>
            <div class="code-name">.icon-warning-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoom-in-filled"></span>
            <div class="name">
              zoom-in-filled
            </div>
            <div class="code-name">.icon-zoom-in-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoom-in-line"></span>
            <div class="name">
              zoom-in-line
            </div>
            <div class="code-name">.icon-zoom-in-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoom-out-line"></span>
            <div class="name">
              zoom-out-line
            </div>
            <div class="code-name">.icon-zoom-out-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoom-out-filled"></span>
            <div class="name">
              zoom-out-filled
            </div>
            <div class="code-name">.icon-zoom-out-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-right-most-line"></span>
            <div class="name">
              right-most-line
            </div>
            <div class="code-name">.icon-right-most-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search-filled"></span>
            <div class="name">
              search-filled
            </div>
            <div class="code-name">.icon-search-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share-line"></span>
            <div class="name">
              share-line
            </div>
            <div class="code-name">.icon-share-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-filled"></span>
            <div class="name">
              star-filled
            </div>
            <div class="code-name">.icon-star-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-line"></span>
            <div class="name">
              star-line
            </div>
            <div class="code-name">.icon-star-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sort-filled"></span>
            <div class="name">
              sort-filled
            </div>
            <div class="code-name">.icon-sort-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sync-filled"></span>
            <div class="name">
              sync-filled
            </div>
            <div class="code-name">.icon-sync-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-return-text-line"></span>
            <div class="name">
              return-text-line
            </div>
            <div class="code-name">.icon-return-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-up-filled"></span>
            <div class="name">
              up-filled
            </div>
            <div class="code-name">.icon-up-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-up-line"></span>
            <div class="name">
              up-line
            </div>
            <div class="code-name">.icon-up-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sand-clock-filled"></span>
            <div class="name">
              sand-clock-filled
            </div>
            <div class="code-name">.icon-sand-clock-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warning-circle-line"></span>
            <div class="name">
              warning-circle-line
            </div>
            <div class="code-name">.icon-warning-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-right-most-filled"></span>
            <div class="name">
              right-most-filled
            </div>
            <div class="code-name">.icon-right-most-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart-line"></span>
            <div class="name">
              shopping-cart-line
            </div>
            <div class="code-name">.icon-shopping-cart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sound-filled"></span>
            <div class="name">
              sound-filled
            </div>
            <div class="code-name">.icon-sound-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search-text-line"></span>
            <div class="name">
              search-text-line
            </div>
            <div class="code-name">.icon-search-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sync-line"></span>
            <div class="name">
              sync-line
            </div>
            <div class="code-name">.icon-sync-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-theme-line"></span>
            <div class="name">
              theme-line
            </div>
            <div class="code-name">.icon-theme-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tool-filled"></span>
            <div class="name">
              tool-filled
            </div>
            <div class="code-name">.icon-tool-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-separate-line"></span>
            <div class="name">
              separate-line
            </div>
            <div class="code-name">.icon-separate-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tool-line"></span>
            <div class="name">
              tool-line
            </div>
            <div class="code-name">.icon-tool-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings-filled"></span>
            <div class="name">
              settings-filled
            </div>
            <div class="code-name">.icon-settings-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings-line"></span>
            <div class="name">
              settings-line
            </div>
            <div class="code-name">.icon-settings-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setting-text-line"></span>
            <div class="name">
              setting-text-line
            </div>
            <div class="code-name">.icon-setting-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-table-filled"></span>
            <div class="name">
              table-filled
            </div>
            <div class="code-name">.icon-table-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-upload-line"></span>
            <div class="name">
              upload-line
            </div>
            <div class="code-name">.icon-upload-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video-filled"></span>
            <div class="name">
              video-filled
            </div>
            <div class="code-name">.icon-video-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh-text-line"></span>
            <div class="name">
              refresh-text-line
            </div>
            <div class="code-name">.icon-refresh-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-upload-text-line"></span>
            <div class="name">
              upload-text-line
            </div>
            <div class="code-name">.icon-upload-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-spreadsheet-filled"></span>
            <div class="name">
              spreadsheet-filled
            </div>
            <div class="code-name">.icon-spreadsheet-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warehouse-search-line"></span>
            <div class="name">
              warehouse-search-line
            </div>
            <div class="code-name">.icon-warehouse-search-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-update-line"></span>
            <div class="name">
              update-line
            </div>
            <div class="code-name">.icon-update-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-traffic-return-line"></span>
            <div class="name">
              traffic-return-line
            </div>
            <div class="code-name">.icon-traffic-return-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-transition-line"></span>
            <div class="name">
              transition-line
            </div>
            <div class="code-name">.icon-transition-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-truck-line"></span>
            <div class="name">
              truck-line
            </div>
            <div class="code-name">.icon-truck-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-user-line"></span>
            <div class="name">
              add-user-line
            </div>
            <div class="code-name">.icon-add-user-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart-filled"></span>
            <div class="name">
              shopping-cart-filled
            </div>
            <div class="code-name">.icon-shopping-cart-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-line"></span>
            <div class="name">
              add-line
            </div>
            <div class="code-name">.icon-add-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-submit-text-line"></span>
            <div class="name">
              submit-text-line
            </div>
            <div class="code-name">.icon-submit-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-circle-line"></span>
            <div class="name">
              add-circle-line
            </div>
            <div class="code-name">.icon-add-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share-text-line"></span>
            <div class="name">
              share-text-line
            </div>
            <div class="code-name">.icon-share-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down-filled"></span>
            <div class="name">
              arrow-down-filled
            </div>
            <div class="code-name">.icon-arrow-down-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-supply-chain-line"></span>
            <div class="name">
              supply-chain-line
            </div>
            <div class="code-name">.icon-supply-chain-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down-line"></span>
            <div class="name">
              arrow-down-line
            </div>
            <div class="code-name">.icon-arrow-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-text-help-line"></span>
            <div class="name">
              text-help-line
            </div>
            <div class="code-name">.icon-text-help-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left-line"></span>
            <div class="name">
              arrow-left-line
            </div>
            <div class="code-name">.icon-arrow-left-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart-text-line"></span>
            <div class="name">
              shopping-cart-text-line
            </div>
            <div class="code-name">.icon-shopping-cart-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-authorization-filled"></span>
            <div class="name">
              authorization-filled
            </div>
            <div class="code-name">.icon-authorization-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-spreadsheet-line"></span>
            <div class="name">
              spreadsheet-line
            </div>
            <div class="code-name">.icon-spreadsheet-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-up-line"></span>
            <div class="name">
              arrow-up-line
            </div>
            <div class="code-name">.icon-arrow-up-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tool-text-line"></span>
            <div class="name">
              tool-text-line
            </div>
            <div class="code-name">.icon-tool-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-authorization-line"></span>
            <div class="name">
              authorization-line
            </div>
            <div class="code-name">.icon-authorization-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-voice-mute-line"></span>
            <div class="name">
              voice-mute-line
            </div>
            <div class="code-name">.icon-voice-mute-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-up-filled"></span>
            <div class="name">
              arrow-up-filled
            </div>
            <div class="code-name">.icon-arrow-up-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-view-text-line"></span>
            <div class="name">
              view-text-line
            </div>
            <div class="code-name">.icon-view-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right-line"></span>
            <div class="name">
              arrow-right-line
            </div>
            <div class="code-name">.icon-arrow-right-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rollback-text-line"></span>
            <div class="name">
              rollback-text-line
            </div>
            <div class="code-name">.icon-rollback-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-avatar-filled"></span>
            <div class="name">
              avatar-filled
            </div>
            <div class="code-name">.icon-avatar-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-workbench-filled"></span>
            <div class="name">
              workbench-filled
            </div>
            <div class="code-name">.icon-workbench-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-circle-filled"></span>
            <div class="name">
              add-circle-filled
            </div>
            <div class="code-name">.icon-add-circle-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-right-filled"></span>
            <div class="name">
              right-filled
            </div>
            <div class="code-name">.icon-right-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-attach-line"></span>
            <div class="name">
              attach-line
            </div>
            <div class="code-name">.icon-attach-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sand-clock-line"></span>
            <div class="name">
              sand-clock-line
            </div>
            <div class="code-name">.icon-sand-clock-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right-filled"></span>
            <div class="name">
              arrow-right-filled
            </div>
            <div class="code-name">.icon-arrow-right-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-sell-line"></span>
            <div class="name">
              add-sell-line
            </div>
            <div class="code-name">.icon-add-sell-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left-filled"></span>
            <div class="name">
              arrow-left-filled
            </div>
            <div class="code-name">.icon-arrow-left-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-avatar-line"></span>
            <div class="name">
              avatar-line
            </div>
            <div class="code-name">.icon-avatar-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-text-line"></span>
            <div class="name">
              add-text-line
            </div>
            <div class="code-name">.icon-add-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-abandon-cance-line"></span>
            <div class="name">
              abandon-cance-line
            </div>
            <div class="code-name">.icon-abandon-cance-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-apply-save-line"></span>
            <div class="name">
              apply-save-line
            </div>
            <div class="code-name">.icon-apply-save-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bar-chart-line"></span>
            <div class="name">
              bar-chart-line
            </div>
            <div class="code-name">.icon-bar-chart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell-filled"></span>
            <div class="name">
              bell-filled
            </div>
            <div class="code-name">.icon-bell-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell-line"></span>
            <div class="name">
              bell-line
            </div>
            <div class="code-name">.icon-bell-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell-mute-filled"></span>
            <div class="name">
              bell-mute-filled
            </div>
            <div class="code-name">.icon-bell-mute-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell-mute-line"></span>
            <div class="name">
              bell-mute-line
            </div>
            <div class="code-name">.icon-bell-mute-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calendar-filled"></span>
            <div class="name">
              calendar-filled
            </div>
            <div class="code-name">.icon-calendar-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-camera-line"></span>
            <div class="name">
              camera-line
            </div>
            <div class="code-name">.icon-camera-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-camera-filled"></span>
            <div class="name">
              camera-filled
            </div>
            <div class="code-name">.icon-camera-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calendar-line"></span>
            <div class="name">
              calendar-line
            </div>
            <div class="code-name">.icon-calendar-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-change-pass-line"></span>
            <div class="name">
              change-pass-line
            </div>
            <div class="code-name">.icon-change-pass-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-change-user-line"></span>
            <div class="name">
              change-user-line
            </div>
            <div class="code-name">.icon-change-user-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check-circle-filled"></span>
            <div class="name">
              check-circle-filled
            </div>
            <div class="code-name">.icon-check-circle-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check-circle-line"></span>
            <div class="name">
              check-circle-line
            </div>
            <div class="code-name">.icon-check-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clear-line"></span>
            <div class="name">
              clear-line
            </div>
            <div class="code-name">.icon-clear-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close-circle-line"></span>
            <div class="name">
              close-circle-line
            </div>
            <div class="code-name">.icon-close-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-column-list-line"></span>
            <div class="name">
              column-list-line
            </div>
            <div class="code-name">.icon-column-list-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close-circle-filled"></span>
            <div class="name">
              close-circle-filled
            </div>
            <div class="code-name">.icon-close-circle-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clock-filled"></span>
            <div class="name">
              clock-filled
            </div>
            <div class="code-name">.icon-clock-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-column-list-filled"></span>
            <div class="name">
              column-list-filled
            </div>
            <div class="code-name">.icon-column-list-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clock-line"></span>
            <div class="name">
              clock-line
            </div>
            <div class="code-name">.icon-clock-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-code-line"></span>
            <div class="name">
              code-line
            </div>
            <div class="code-name">.icon-code-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-compass-filled"></span>
            <div class="name">
              compass-filled
            </div>
            <div class="code-name">.icon-compass-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy-line"></span>
            <div class="name">
              copy-line
            </div>
            <div class="code-name">.icon-copy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-compass-line"></span>
            <div class="name">
              compass-line
            </div>
            <div class="code-name">.icon-compass-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-contacts-filled"></span>
            <div class="name">
              contacts-filled
            </div>
            <div class="code-name">.icon-contacts-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-community-filled"></span>
            <div class="name">
              community-filled
            </div>
            <div class="code-name">.icon-community-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy-filled"></span>
            <div class="name">
              copy-filled
            </div>
            <div class="code-name">.icon-copy-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dash-board-filled"></span>
            <div class="name">
              dash-board-filled
            </div>
            <div class="code-name">.icon-dash-board-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-create-invoice-filled"></span>
            <div class="name">
              create-invoice-filled
            </div>
            <div class="code-name">.icon-create-invoice-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-create-invoice-line"></span>
            <div class="name">
              create-invoice-line
            </div>
            <div class="code-name">.icon-create-invoice-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-customer-service-line"></span>
            <div class="name">
              customer-service-line
            </div>
            <div class="code-name">.icon-customer-service-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-community-line"></span>
            <div class="name">
              community-line
            </div>
            <div class="code-name">.icon-community-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-contacts-line"></span>
            <div class="name">
              contacts-line
            </div>
            <div class="code-name">.icon-contacts-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bill-text-line"></span>
            <div class="name">
              bill-text-line
            </div>
            <div class="code-name">.icon-bill-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-filled"></span>
            <div class="name">
              delete-filled
            </div>
            <div class="code-name">.icon-delete-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-change-network-line"></span>
            <div class="name">
              change-network-line
            </div>
            <div class="code-name">.icon-change-network-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-change-pass-filled"></span>
            <div class="name">
              change-pass-filled
            </div>
            <div class="code-name">.icon-change-pass-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-line"></span>
            <div class="name">
              delete-line
            </div>
            <div class="code-name">.icon-delete-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-disable-circle-line"></span>
            <div class="name">
              disable-circle-line
            </div>
            <div class="code-name">.icon-disable-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-disable-circle-filled"></span>
            <div class="name">
              disable-circle-filled
            </div>
            <div class="code-name">.icon-disable-circle-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clear-filled"></span>
            <div class="name">
              clear-filled
            </div>
            <div class="code-name">.icon-clear-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-double-left-line"></span>
            <div class="name">
              double-left-line
            </div>
            <div class="code-name">.icon-double-left-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dot-chart-line"></span>
            <div class="name">
              dot-chart-line
            </div>
            <div class="code-name">.icon-dot-chart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-disable-text-line"></span>
            <div class="name">
              disable-text-line
            </div>
            <div class="code-name">.icon-disable-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-double-right-filled"></span>
            <div class="name">
              double-right-filled
            </div>
            <div class="code-name">.icon-double-right-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-double-left-filled"></span>
            <div class="name">
              double-left-filled
            </div>
            <div class="code-name">.icon-double-left-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy-receipts-filled"></span>
            <div class="name">
              copy-receipts-filled
            </div>
            <div class="code-name">.icon-copy-receipts-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-data-check-line"></span>
            <div class="name">
              data-check-line
            </div>
            <div class="code-name">.icon-data-check-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-data-check-filled"></span>
            <div class="name">
              data-check-filled
            </div>
            <div class="code-name">.icon-data-check-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy-receipts-line"></span>
            <div class="name">
              copy-receipts-line
            </div>
            <div class="code-name">.icon-copy-receipts-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-down-filled"></span>
            <div class="name">
              down-filled
            </div>
            <div class="code-name">.icon-down-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-double-right-line"></span>
            <div class="name">
              double-right-line
            </div>
            <div class="code-name">.icon-double-right-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-down-line"></span>
            <div class="name">
              down-line
            </div>
            <div class="code-name">.icon-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download-line"></span>
            <div class="name">
              download-line
            </div>
            <div class="code-name">.icon-download-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dash-board-line"></span>
            <div class="name">
              dash-board-line
            </div>
            <div class="code-name">.icon-dash-board-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy-settings-filled"></span>
            <div class="name">
              copy-settings-filled
            </div>
            <div class="code-name">.icon-copy-settings-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit-filled"></span>
            <div class="name">
              edit-filled
            </div>
            <div class="code-name">.icon-edit-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit-text-line"></span>
            <div class="name">
              edit-text-line
            </div>
            <div class="code-name">.icon-edit-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-email-filled"></span>
            <div class="name">
              email-filled
            </div>
            <div class="code-name">.icon-email-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-email-line"></span>
            <div class="name">
              email-line
            </div>
            <div class="code-name">.icon-email-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit-line"></span>
            <div class="name">
              edit-line
            </div>
            <div class="code-name">.icon-edit-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-filled"></span>
            <div class="name">
              file-filled
            </div>
            <div class="code-name">.icon-file-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-line"></span>
            <div class="name">
              file-line
            </div>
            <div class="code-name">.icon-file-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-failure-line"></span>
            <div class="name">
              failure-line
            </div>
            <div class="code-name">.icon-failure-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favorite-filled"></span>
            <div class="name">
              favorite-filled
            </div>
            <div class="code-name">.icon-favorite-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favorite-line"></span>
            <div class="name">
              favorite-line
            </div>
            <div class="code-name">.icon-favorite-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exchange-line"></span>
            <div class="name">
              exchange-line
            </div>
            <div class="code-name">.icon-exchange-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-export-line"></span>
            <div class="name">
              export-line
            </div>
            <div class="code-name">.icon-export-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-filter-filled"></span>
            <div class="name">
              filter-filled
            </div>
            <div class="code-name">.icon-filter-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-filler-line"></span>
            <div class="name">
              filler-line
            </div>
            <div class="code-name">.icon-filler-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fold-line"></span>
            <div class="name">
              fold-line
            </div>
            <div class="code-name">.icon-fold-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-line"></span>
            <div class="name">
              folder-line
            </div>
            <div class="code-name">.icon-folder-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-user-line"></span>
            <div class="name">
              delete-user-line
            </div>
            <div class="code-name">.icon-delete-user-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-filled"></span>
            <div class="name">
              folder-filled
            </div>
            <div class="code-name">.icon-folder-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-open-filled"></span>
            <div class="name">
              folder-open-filled
            </div>
            <div class="code-name">.icon-folder-open-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-open-line"></span>
            <div class="name">
              folder-open-line
            </div>
            <div class="code-name">.icon-folder-open-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-date-time-line"></span>
            <div class="name">
              date-time-line
            </div>
            <div class="code-name">.icon-date-time-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-form-filled"></span>
            <div class="name">
              form-filled
            </div>
            <div class="code-name">.icon-form-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-freeze-circle-filled"></span>
            <div class="name">
              freeze-circle-filled
            </div>
            <div class="code-name">.icon-freeze-circle-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help-circle-filled"></span>
            <div class="name">
              help-circle-filled
            </div>
            <div class="code-name">.icon-help-circle-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-form-line"></span>
            <div class="name">
              form-line
            </div>
            <div class="code-name">.icon-form-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hierarchical-list-filled"></span>
            <div class="name">
              hierarchical-list-filled
            </div>
            <div class="code-name">.icon-hierarchical-list-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help-circle-line"></span>
            <div class="name">
              help-circle-line
            </div>
            <div class="code-name">.icon-help-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-half-star-filled"></span>
            <div class="name">
              half-star-filled
            </div>
            <div class="code-name">.icon-half-star-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home-filled"></span>
            <div class="name">
              home-filled
            </div>
            <div class="code-name">.icon-home-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hierarchical-list-line"></span>
            <div class="name">
              hierarchical-list-line
            </div>
            <div class="code-name">.icon-hierarchical-list-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-image-filled"></span>
            <div class="name">
              image-filled
            </div>
            <div class="code-name">.icon-image-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Indent-list-filled"></span>
            <div class="name">
              Indent-list-filled
            </div>
            <div class="code-name">.icon-Indent-list-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home-line"></span>
            <div class="name">
              home-line
            </div>
            <div class="code-name">.icon-home-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-import-line"></span>
            <div class="name">
              import-line
            </div>
            <div class="code-name">.icon-import-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info-circle-filled"></span>
            <div class="name">
              info-circle-filled
            </div>
            <div class="code-name">.icon-info-circle-filled
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-next"></use>
                </svg>
                <div class="name">next</div>
                <div class="code-name">#icon-next</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tezhengchuli"></use>
                </svg>
                <div class="name">tezhengchuli</div>
                <div class="code-name">#icon-tezhengchuli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moxingpinggu"></use>
                </svg>
                <div class="name">moxingpinggu</div>
                <div class="code-name">#icon-moxingpinggu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-prev"></use>
                </svg>
                <div class="name">prev</div>
                <div class="code-name">#icon-prev</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-start-filled"></use>
                </svg>
                <div class="name">start-filled</div>
                <div class="code-name">#icon-start-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stop-line"></use>
                </svg>
                <div class="name">stop-line</div>
                <div class="code-name">#icon-stop-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suanfamoxing"></use>
                </svg>
                <div class="name">suanfamoxing</div>
                <div class="code-name">#icon-suanfamoxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuanwenjian"></use>
                </svg>
                <div class="name">shangchuanwenjian</div>
                <div class="code-name">#icon-shangchuanwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-out-line"></use>
                </svg>
                <div class="name">out-line</div>
                <div class="code-name">#icon-out-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu-fold-line"></use>
                </svg>
                <div class="name">menu-fold-line</div>
                <div class="code-name">#icon-menu-fold-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu-hide-line"></use>
                </svg>
                <div class="name">menu-hide-line</div>
                <div class="code-name">#icon-menu-hide-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-data-filled"></use>
                </svg>
                <div class="name">data-filled</div>
                <div class="code-name">#icon-data-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-image-line"></use>
                </svg>
                <div class="name">image-line</div>
                <div class="code-name">#icon-image-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-invisible-filled"></use>
                </svg>
                <div class="name">invisible-filled</div>
                <div class="code-name">#icon-invisible-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info-circle-line"></use>
                </svg>
                <div class="name">info-circle-line</div>
                <div class="code-name">#icon-info-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Indent-list-line"></use>
                </svg>
                <div class="name">Indent-list-line</div>
                <div class="code-name">#icon-Indent-list-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-invisible-2-filled"></use>
                </svg>
                <div class="name">invisible-2-filled</div>
                <div class="code-name">#icon-invisible-2-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-left-filled"></use>
                </svg>
                <div class="name">left-filled</div>
                <div class="code-name">#icon-left-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-left-most-filled"></use>
                </svg>
                <div class="name">left-most-filled</div>
                <div class="code-name">#icon-left-most-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-left-most-line"></use>
                </svg>
                <div class="name">left-most-line</div>
                <div class="code-name">#icon-left-most-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-left-line"></use>
                </svg>
                <div class="name">left-line</div>
                <div class="code-name">#icon-left-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-line-chart-line"></use>
                </svg>
                <div class="name">line-chart-line</div>
                <div class="code-name">#icon-line-chart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-invisible-line"></use>
                </svg>
                <div class="name">invisible-line</div>
                <div class="code-name">#icon-invisible-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-line"></use>
                </svg>
                <div class="name">lock-line</div>
                <div class="code-name">#icon-lock-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mall-user-line"></use>
                </svg>
                <div class="name">mall-user-line</div>
                <div class="code-name">#icon-mall-user-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-filled"></use>
                </svg>
                <div class="name">lock-filled</div>
                <div class="code-name">#icon-lock-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location-filled"></use>
                </svg>
                <div class="name">location-filled</div>
                <div class="code-name">#icon-location-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus-circle-filled"></use>
                </svg>
                <div class="name">minus-circle-filled</div>
                <div class="code-name">#icon-minus-circle-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus-line"></use>
                </svg>
                <div class="name">minus-line</div>
                <div class="code-name">#icon-minus-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more-2-line"></use>
                </svg>
                <div class="name">more-2-line</div>
                <div class="code-name">#icon-more-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message-line"></use>
                </svg>
                <div class="name">message-line</div>
                <div class="code-name">#icon-message-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message-filled"></use>
                </svg>
                <div class="name">message-filled</div>
                <div class="code-name">#icon-message-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-network-filled"></use>
                </svg>
                <div class="name">network-filled</div>
                <div class="code-name">#icon-network-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus-circle-line"></use>
                </svg>
                <div class="name">minus-circle-line</div>
                <div class="code-name">#icon-minus-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more-filled"></use>
                </svg>
                <div class="name">more-filled</div>
                <div class="code-name">#icon-more-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more-line"></use>
                </svg>
                <div class="name">more-line</div>
                <div class="code-name">#icon-more-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-note-filled"></use>
                </svg>
                <div class="name">note-filled</div>
                <div class="code-name">#icon-note-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-network-line"></use>
                </svg>
                <div class="name">network-line</div>
                <div class="code-name">#icon-network-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-note-line"></use>
                </svg>
                <div class="name">note-line</div>
                <div class="code-name">#icon-note-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-organization-line"></use>
                </svg>
                <div class="name">organization-line</div>
                <div class="code-name">#icon-organization-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-organization-filled"></use>
                </svg>
                <div class="name">organization-filled</div>
                <div class="code-name">#icon-organization-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-package-filled"></use>
                </svg>
                <div class="name">package-filled</div>
                <div class="code-name">#icon-package-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-package-receive-line"></use>
                </svg>
                <div class="name">package-receive-line</div>
                <div class="code-name">#icon-package-receive-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-package-line"></use>
                </svg>
                <div class="name">package-line</div>
                <div class="code-name">#icon-package-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pie-chart-filled"></use>
                </svg>
                <div class="name">pie-chart-filled</div>
                <div class="code-name">#icon-pie-chart-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pie-chart-line"></use>
                </svg>
                <div class="name">pie-chart-line</div>
                <div class="code-name">#icon-pie-chart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play-circle-line"></use>
                </svg>
                <div class="name">play-circle-line</div>
                <div class="code-name">#icon-play-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play-circle-filled"></use>
                </svg>
                <div class="name">play-circle-filled</div>
                <div class="code-name">#icon-play-circle-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-print-line"></use>
                </svg>
                <div class="name">print-line</div>
                <div class="code-name">#icon-print-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pass-text-line"></use>
                </svg>
                <div class="name">pass-text-line</div>
                <div class="code-name">#icon-pass-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ranking-filled"></use>
                </svg>
                <div class="name">ranking-filled</div>
                <div class="code-name">#icon-ranking-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-print-filled"></use>
                </svg>
                <div class="name">print-filled</div>
                <div class="code-name">#icon-print-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-push-line"></use>
                </svg>
                <div class="name">push-line</div>
                <div class="code-name">#icon-push-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-receive-file-filled"></use>
                </svg>
                <div class="name">receive-file-filled</div>
                <div class="code-name">#icon-receive-file-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ranking-line"></use>
                </svg>
                <div class="name">ranking-line</div>
                <div class="code-name">#icon-ranking-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-receipts-line"></use>
                </svg>
                <div class="name">receipts-line</div>
                <div class="code-name">#icon-receipts-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-finance-filled"></use>
                </svg>
                <div class="name">finance-filled</div>
                <div class="code-name">#icon-finance-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy-settings-line"></use>
                </svg>
                <div class="name">copy-settings-line</div>
                <div class="code-name">#icon-copy-settings-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favorite-text-line"></use>
                </svg>
                <div class="name">favorite-text-line</div>
                <div class="code-name">#icon-favorite-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-receive-filled"></use>
                </svg>
                <div class="name">receive-filled</div>
                <div class="code-name">#icon-receive-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-freeze-circle-line"></use>
                </svg>
                <div class="name">freeze-circle-line</div>
                <div class="code-name">#icon-freeze-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-receive-line"></use>
                </svg>
                <div class="name">receive-line</div>
                <div class="code-name">#icon-receive-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-push-filled"></use>
                </svg>
                <div class="name">push-filled</div>
                <div class="code-name">#icon-push-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-finance-line"></use>
                </svg>
                <div class="name">finance-line</div>
                <div class="code-name">#icon-finance-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-release-line"></use>
                </svg>
                <div class="name">release-line</div>
                <div class="code-name">#icon-release-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-relation-line"></use>
                </svg>
                <div class="name">relation-line</div>
                <div class="code-name">#icon-relation-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reload-line"></use>
                </svg>
                <div class="name">reload-line</div>
                <div class="code-name">#icon-reload-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reset-time-line"></use>
                </svg>
                <div class="name">reset-time-line</div>
                <div class="code-name">#icon-reset-time-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-invisible-2-line"></use>
                </svg>
                <div class="name">invisible-2-line</div>
                <div class="code-name">#icon-invisible-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-invalid-text-line"></use>
                </svg>
                <div class="name">invalid-text-line</div>
                <div class="code-name">#icon-invalid-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reset-line"></use>
                </svg>
                <div class="name">reset-line</div>
                <div class="code-name">#icon-reset-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-receipts-filled"></use>
                </svg>
                <div class="name">receipts-filled</div>
                <div class="code-name">#icon-receipts-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location-line"></use>
                </svg>
                <div class="name">location-line</div>
                <div class="code-name">#icon-location-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh-select-line"></use>
                </svg>
                <div class="name">refresh-select-line</div>
                <div class="code-name">#icon-refresh-select-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-move-line"></use>
                </svg>
                <div class="name">move-line</div>
                <div class="code-name">#icon-move-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-organization-text-line"></use>
                </svg>
                <div class="name">organization-text-line</div>
                <div class="code-name">#icon-organization-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-package-end-line"></use>
                </svg>
                <div class="name">package-end-line</div>
                <div class="code-name">#icon-package-end-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right-line"></use>
                </svg>
                <div class="name">right-line</div>
                <div class="code-name">#icon-right-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-receive-file-line"></use>
                </svg>
                <div class="name">receive-file-line</div>
                <div class="code-name">#icon-receive-file-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-save-filled"></use>
                </svg>
                <div class="name">save-filled</div>
                <div class="code-name">#icon-save-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-package-return-line"></use>
                </svg>
                <div class="name">package-return-line</div>
                <div class="code-name">#icon-package-return-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-package-search-line"></use>
                </svg>
                <div class="name">package-search-line</div>
                <div class="code-name">#icon-package-search-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-save-line"></use>
                </svg>
                <div class="name">save-line</div>
                <div class="code-name">#icon-save-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search-line"></use>
                </svg>
                <div class="name">search-line</div>
                <div class="code-name">#icon-search-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-seal-filled"></use>
                </svg>
                <div class="name">seal-filled</div>
                <div class="code-name">#icon-seal-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-seal-line"></use>
                </svg>
                <div class="name">seal-line</div>
                <div class="code-name">#icon-seal-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-screenshot-line"></use>
                </svg>
                <div class="name">screenshot-line</div>
                <div class="code-name">#icon-screenshot-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-package-select-line"></use>
                </svg>
                <div class="name">package-select-line</div>
                <div class="code-name">#icon-package-select-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sell-line"></use>
                </svg>
                <div class="name">sell-line</div>
                <div class="code-name">#icon-sell-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sell-filled"></use>
                </svg>
                <div class="name">sell-filled</div>
                <div class="code-name">#icon-sell-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sound_mute-filled"></use>
                </svg>
                <div class="name">sound_mute-filled</div>
                <div class="code-name">#icon-sound_mute-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sound_mute-line"></use>
                </svg>
                <div class="name">sound_mute-line</div>
                <div class="code-name">#icon-sound_mute-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh-all-line"></use>
                </svg>
                <div class="name">refresh-all-line</div>
                <div class="code-name">#icon-refresh-all-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spin-line"></use>
                </svg>
                <div class="name">spin-line</div>
                <div class="code-name">#icon-spin-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-special_right-filled"></use>
                </svg>
                <div class="name">special_right-filled</div>
                <div class="code-name">#icon-special_right-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stopwatch-filled"></use>
                </svg>
                <div class="name">stopwatch-filled</div>
                <div class="code-name">#icon-stopwatch-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-success-line"></use>
                </svg>
                <div class="name">success-line</div>
                <div class="code-name">#icon-success-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sound-line"></use>
                </svg>
                <div class="name">sound-line</div>
                <div class="code-name">#icon-sound-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-table-line"></use>
                </svg>
                <div class="name">table-line</div>
                <div class="code-name">#icon-table-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-text-filled"></use>
                </svg>
                <div class="name">text-filled</div>
                <div class="code-name">#icon-text-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stopwatch-line"></use>
                </svg>
                <div class="name">stopwatch-line</div>
                <div class="code-name">#icon-stopwatch-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-text-line"></use>
                </svg>
                <div class="name">text-line</div>
                <div class="code-name">#icon-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-theme-filled"></use>
                </svg>
                <div class="name">theme-filled</div>
                <div class="code-name">#icon-theme-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-truck-filled"></use>
                </svg>
                <div class="name">truck-filled</div>
                <div class="code-name">#icon-truck-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unordered-list-line"></use>
                </svg>
                <div class="name">unordered-list-line</div>
                <div class="code-name">#icon-unordered-list-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock-filled"></use>
                </svg>
                <div class="name">unlock-filled</div>
                <div class="code-name">#icon-unlock-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-undo-line"></use>
                </svg>
                <div class="name">undo-line</div>
                <div class="code-name">#icon-undo-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh-cache-line"></use>
                </svg>
                <div class="name">refresh-cache-line</div>
                <div class="code-name">#icon-refresh-cache-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video-line"></use>
                </svg>
                <div class="name">video-line</div>
                <div class="code-name">#icon-video-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-voice-filled"></use>
                </svg>
                <div class="name">voice-filled</div>
                <div class="code-name">#icon-voice-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock-line"></use>
                </svg>
                <div class="name">unlock-line</div>
                <div class="code-name">#icon-unlock-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning-circle-filled"></use>
                </svg>
                <div class="name">warning-circle-filled</div>
                <div class="code-name">#icon-warning-circle-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-voice-mute-filled"></use>
                </svg>
                <div class="name">voice-mute-filled</div>
                <div class="code-name">#icon-voice-mute-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-voice-line"></use>
                </svg>
                <div class="name">voice-line</div>
                <div class="code-name">#icon-voice-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning-text-line"></use>
                </svg>
                <div class="name">warning-text-line</div>
                <div class="code-name">#icon-warning-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-in-filled"></use>
                </svg>
                <div class="name">zoom-in-filled</div>
                <div class="code-name">#icon-zoom-in-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-in-line"></use>
                </svg>
                <div class="name">zoom-in-line</div>
                <div class="code-name">#icon-zoom-in-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-out-line"></use>
                </svg>
                <div class="name">zoom-out-line</div>
                <div class="code-name">#icon-zoom-out-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-out-filled"></use>
                </svg>
                <div class="name">zoom-out-filled</div>
                <div class="code-name">#icon-zoom-out-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right-most-line"></use>
                </svg>
                <div class="name">right-most-line</div>
                <div class="code-name">#icon-right-most-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search-filled"></use>
                </svg>
                <div class="name">search-filled</div>
                <div class="code-name">#icon-search-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-line"></use>
                </svg>
                <div class="name">share-line</div>
                <div class="code-name">#icon-share-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-filled"></use>
                </svg>
                <div class="name">star-filled</div>
                <div class="code-name">#icon-star-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-line"></use>
                </svg>
                <div class="name">star-line</div>
                <div class="code-name">#icon-star-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sort-filled"></use>
                </svg>
                <div class="name">sort-filled</div>
                <div class="code-name">#icon-sort-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sync-filled"></use>
                </svg>
                <div class="name">sync-filled</div>
                <div class="code-name">#icon-sync-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-return-text-line"></use>
                </svg>
                <div class="name">return-text-line</div>
                <div class="code-name">#icon-return-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-up-filled"></use>
                </svg>
                <div class="name">up-filled</div>
                <div class="code-name">#icon-up-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-up-line"></use>
                </svg>
                <div class="name">up-line</div>
                <div class="code-name">#icon-up-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sand-clock-filled"></use>
                </svg>
                <div class="name">sand-clock-filled</div>
                <div class="code-name">#icon-sand-clock-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning-circle-line"></use>
                </svg>
                <div class="name">warning-circle-line</div>
                <div class="code-name">#icon-warning-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right-most-filled"></use>
                </svg>
                <div class="name">right-most-filled</div>
                <div class="code-name">#icon-right-most-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart-line"></use>
                </svg>
                <div class="name">shopping-cart-line</div>
                <div class="code-name">#icon-shopping-cart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sound-filled"></use>
                </svg>
                <div class="name">sound-filled</div>
                <div class="code-name">#icon-sound-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search-text-line"></use>
                </svg>
                <div class="name">search-text-line</div>
                <div class="code-name">#icon-search-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sync-line"></use>
                </svg>
                <div class="name">sync-line</div>
                <div class="code-name">#icon-sync-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-theme-line"></use>
                </svg>
                <div class="name">theme-line</div>
                <div class="code-name">#icon-theme-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tool-filled"></use>
                </svg>
                <div class="name">tool-filled</div>
                <div class="code-name">#icon-tool-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-separate-line"></use>
                </svg>
                <div class="name">separate-line</div>
                <div class="code-name">#icon-separate-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tool-line"></use>
                </svg>
                <div class="name">tool-line</div>
                <div class="code-name">#icon-tool-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings-filled"></use>
                </svg>
                <div class="name">settings-filled</div>
                <div class="code-name">#icon-settings-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings-line"></use>
                </svg>
                <div class="name">settings-line</div>
                <div class="code-name">#icon-settings-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setting-text-line"></use>
                </svg>
                <div class="name">setting-text-line</div>
                <div class="code-name">#icon-setting-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-table-filled"></use>
                </svg>
                <div class="name">table-filled</div>
                <div class="code-name">#icon-table-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload-line"></use>
                </svg>
                <div class="name">upload-line</div>
                <div class="code-name">#icon-upload-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video-filled"></use>
                </svg>
                <div class="name">video-filled</div>
                <div class="code-name">#icon-video-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh-text-line"></use>
                </svg>
                <div class="name">refresh-text-line</div>
                <div class="code-name">#icon-refresh-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload-text-line"></use>
                </svg>
                <div class="name">upload-text-line</div>
                <div class="code-name">#icon-upload-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spreadsheet-filled"></use>
                </svg>
                <div class="name">spreadsheet-filled</div>
                <div class="code-name">#icon-spreadsheet-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warehouse-search-line"></use>
                </svg>
                <div class="name">warehouse-search-line</div>
                <div class="code-name">#icon-warehouse-search-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-update-line"></use>
                </svg>
                <div class="name">update-line</div>
                <div class="code-name">#icon-update-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-traffic-return-line"></use>
                </svg>
                <div class="name">traffic-return-line</div>
                <div class="code-name">#icon-traffic-return-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-transition-line"></use>
                </svg>
                <div class="name">transition-line</div>
                <div class="code-name">#icon-transition-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-truck-line"></use>
                </svg>
                <div class="name">truck-line</div>
                <div class="code-name">#icon-truck-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-user-line"></use>
                </svg>
                <div class="name">add-user-line</div>
                <div class="code-name">#icon-add-user-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart-filled"></use>
                </svg>
                <div class="name">shopping-cart-filled</div>
                <div class="code-name">#icon-shopping-cart-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-line"></use>
                </svg>
                <div class="name">add-line</div>
                <div class="code-name">#icon-add-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-submit-text-line"></use>
                </svg>
                <div class="name">submit-text-line</div>
                <div class="code-name">#icon-submit-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-circle-line"></use>
                </svg>
                <div class="name">add-circle-line</div>
                <div class="code-name">#icon-add-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-text-line"></use>
                </svg>
                <div class="name">share-text-line</div>
                <div class="code-name">#icon-share-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-filled"></use>
                </svg>
                <div class="name">arrow-down-filled</div>
                <div class="code-name">#icon-arrow-down-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-supply-chain-line"></use>
                </svg>
                <div class="name">supply-chain-line</div>
                <div class="code-name">#icon-supply-chain-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-line"></use>
                </svg>
                <div class="name">arrow-down-line</div>
                <div class="code-name">#icon-arrow-down-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-text-help-line"></use>
                </svg>
                <div class="name">text-help-line</div>
                <div class="code-name">#icon-text-help-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-line"></use>
                </svg>
                <div class="name">arrow-left-line</div>
                <div class="code-name">#icon-arrow-left-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart-text-line"></use>
                </svg>
                <div class="name">shopping-cart-text-line</div>
                <div class="code-name">#icon-shopping-cart-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-authorization-filled"></use>
                </svg>
                <div class="name">authorization-filled</div>
                <div class="code-name">#icon-authorization-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spreadsheet-line"></use>
                </svg>
                <div class="name">spreadsheet-line</div>
                <div class="code-name">#icon-spreadsheet-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-line"></use>
                </svg>
                <div class="name">arrow-up-line</div>
                <div class="code-name">#icon-arrow-up-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tool-text-line"></use>
                </svg>
                <div class="name">tool-text-line</div>
                <div class="code-name">#icon-tool-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-authorization-line"></use>
                </svg>
                <div class="name">authorization-line</div>
                <div class="code-name">#icon-authorization-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-voice-mute-line"></use>
                </svg>
                <div class="name">voice-mute-line</div>
                <div class="code-name">#icon-voice-mute-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-filled"></use>
                </svg>
                <div class="name">arrow-up-filled</div>
                <div class="code-name">#icon-arrow-up-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-view-text-line"></use>
                </svg>
                <div class="name">view-text-line</div>
                <div class="code-name">#icon-view-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-line"></use>
                </svg>
                <div class="name">arrow-right-line</div>
                <div class="code-name">#icon-arrow-right-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rollback-text-line"></use>
                </svg>
                <div class="name">rollback-text-line</div>
                <div class="code-name">#icon-rollback-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-avatar-filled"></use>
                </svg>
                <div class="name">avatar-filled</div>
                <div class="code-name">#icon-avatar-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-workbench-filled"></use>
                </svg>
                <div class="name">workbench-filled</div>
                <div class="code-name">#icon-workbench-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-circle-filled"></use>
                </svg>
                <div class="name">add-circle-filled</div>
                <div class="code-name">#icon-add-circle-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right-filled"></use>
                </svg>
                <div class="name">right-filled</div>
                <div class="code-name">#icon-right-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attach-line"></use>
                </svg>
                <div class="name">attach-line</div>
                <div class="code-name">#icon-attach-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sand-clock-line"></use>
                </svg>
                <div class="name">sand-clock-line</div>
                <div class="code-name">#icon-sand-clock-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-filled"></use>
                </svg>
                <div class="name">arrow-right-filled</div>
                <div class="code-name">#icon-arrow-right-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-sell-line"></use>
                </svg>
                <div class="name">add-sell-line</div>
                <div class="code-name">#icon-add-sell-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-filled"></use>
                </svg>
                <div class="name">arrow-left-filled</div>
                <div class="code-name">#icon-arrow-left-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-avatar-line"></use>
                </svg>
                <div class="name">avatar-line</div>
                <div class="code-name">#icon-avatar-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-text-line"></use>
                </svg>
                <div class="name">add-text-line</div>
                <div class="code-name">#icon-add-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-abandon-cance-line"></use>
                </svg>
                <div class="name">abandon-cance-line</div>
                <div class="code-name">#icon-abandon-cance-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apply-save-line"></use>
                </svg>
                <div class="name">apply-save-line</div>
                <div class="code-name">#icon-apply-save-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-line"></use>
                </svg>
                <div class="name">bar-chart-line</div>
                <div class="code-name">#icon-bar-chart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell-filled"></use>
                </svg>
                <div class="name">bell-filled</div>
                <div class="code-name">#icon-bell-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell-line"></use>
                </svg>
                <div class="name">bell-line</div>
                <div class="code-name">#icon-bell-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell-mute-filled"></use>
                </svg>
                <div class="name">bell-mute-filled</div>
                <div class="code-name">#icon-bell-mute-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell-mute-line"></use>
                </svg>
                <div class="name">bell-mute-line</div>
                <div class="code-name">#icon-bell-mute-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar-filled"></use>
                </svg>
                <div class="name">calendar-filled</div>
                <div class="code-name">#icon-calendar-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera-line"></use>
                </svg>
                <div class="name">camera-line</div>
                <div class="code-name">#icon-camera-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera-filled"></use>
                </svg>
                <div class="name">camera-filled</div>
                <div class="code-name">#icon-camera-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar-line"></use>
                </svg>
                <div class="name">calendar-line</div>
                <div class="code-name">#icon-calendar-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-change-pass-line"></use>
                </svg>
                <div class="name">change-pass-line</div>
                <div class="code-name">#icon-change-pass-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-change-user-line"></use>
                </svg>
                <div class="name">change-user-line</div>
                <div class="code-name">#icon-change-user-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-circle-filled"></use>
                </svg>
                <div class="name">check-circle-filled</div>
                <div class="code-name">#icon-check-circle-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-circle-line"></use>
                </svg>
                <div class="name">check-circle-line</div>
                <div class="code-name">#icon-check-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clear-line"></use>
                </svg>
                <div class="name">clear-line</div>
                <div class="code-name">#icon-clear-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-circle-line"></use>
                </svg>
                <div class="name">close-circle-line</div>
                <div class="code-name">#icon-close-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-column-list-line"></use>
                </svg>
                <div class="name">column-list-line</div>
                <div class="code-name">#icon-column-list-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-circle-filled"></use>
                </svg>
                <div class="name">close-circle-filled</div>
                <div class="code-name">#icon-close-circle-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock-filled"></use>
                </svg>
                <div class="name">clock-filled</div>
                <div class="code-name">#icon-clock-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-column-list-filled"></use>
                </svg>
                <div class="name">column-list-filled</div>
                <div class="code-name">#icon-column-list-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock-line"></use>
                </svg>
                <div class="name">clock-line</div>
                <div class="code-name">#icon-clock-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-code-line"></use>
                </svg>
                <div class="name">code-line</div>
                <div class="code-name">#icon-code-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compass-filled"></use>
                </svg>
                <div class="name">compass-filled</div>
                <div class="code-name">#icon-compass-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy-line"></use>
                </svg>
                <div class="name">copy-line</div>
                <div class="code-name">#icon-copy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compass-line"></use>
                </svg>
                <div class="name">compass-line</div>
                <div class="code-name">#icon-compass-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-contacts-filled"></use>
                </svg>
                <div class="name">contacts-filled</div>
                <div class="code-name">#icon-contacts-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-community-filled"></use>
                </svg>
                <div class="name">community-filled</div>
                <div class="code-name">#icon-community-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy-filled"></use>
                </svg>
                <div class="name">copy-filled</div>
                <div class="code-name">#icon-copy-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dash-board-filled"></use>
                </svg>
                <div class="name">dash-board-filled</div>
                <div class="code-name">#icon-dash-board-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-create-invoice-filled"></use>
                </svg>
                <div class="name">create-invoice-filled</div>
                <div class="code-name">#icon-create-invoice-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-create-invoice-line"></use>
                </svg>
                <div class="name">create-invoice-line</div>
                <div class="code-name">#icon-create-invoice-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-customer-service-line"></use>
                </svg>
                <div class="name">customer-service-line</div>
                <div class="code-name">#icon-customer-service-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-community-line"></use>
                </svg>
                <div class="name">community-line</div>
                <div class="code-name">#icon-community-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-contacts-line"></use>
                </svg>
                <div class="name">contacts-line</div>
                <div class="code-name">#icon-contacts-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bill-text-line"></use>
                </svg>
                <div class="name">bill-text-line</div>
                <div class="code-name">#icon-bill-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-filled"></use>
                </svg>
                <div class="name">delete-filled</div>
                <div class="code-name">#icon-delete-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-change-network-line"></use>
                </svg>
                <div class="name">change-network-line</div>
                <div class="code-name">#icon-change-network-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-change-pass-filled"></use>
                </svg>
                <div class="name">change-pass-filled</div>
                <div class="code-name">#icon-change-pass-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-line"></use>
                </svg>
                <div class="name">delete-line</div>
                <div class="code-name">#icon-delete-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-disable-circle-line"></use>
                </svg>
                <div class="name">disable-circle-line</div>
                <div class="code-name">#icon-disable-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-disable-circle-filled"></use>
                </svg>
                <div class="name">disable-circle-filled</div>
                <div class="code-name">#icon-disable-circle-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clear-filled"></use>
                </svg>
                <div class="name">clear-filled</div>
                <div class="code-name">#icon-clear-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-double-left-line"></use>
                </svg>
                <div class="name">double-left-line</div>
                <div class="code-name">#icon-double-left-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dot-chart-line"></use>
                </svg>
                <div class="name">dot-chart-line</div>
                <div class="code-name">#icon-dot-chart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-disable-text-line"></use>
                </svg>
                <div class="name">disable-text-line</div>
                <div class="code-name">#icon-disable-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-double-right-filled"></use>
                </svg>
                <div class="name">double-right-filled</div>
                <div class="code-name">#icon-double-right-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-double-left-filled"></use>
                </svg>
                <div class="name">double-left-filled</div>
                <div class="code-name">#icon-double-left-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy-receipts-filled"></use>
                </svg>
                <div class="name">copy-receipts-filled</div>
                <div class="code-name">#icon-copy-receipts-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-data-check-line"></use>
                </svg>
                <div class="name">data-check-line</div>
                <div class="code-name">#icon-data-check-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-data-check-filled"></use>
                </svg>
                <div class="name">data-check-filled</div>
                <div class="code-name">#icon-data-check-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy-receipts-line"></use>
                </svg>
                <div class="name">copy-receipts-line</div>
                <div class="code-name">#icon-copy-receipts-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down-filled"></use>
                </svg>
                <div class="name">down-filled</div>
                <div class="code-name">#icon-down-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-double-right-line"></use>
                </svg>
                <div class="name">double-right-line</div>
                <div class="code-name">#icon-double-right-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down-line"></use>
                </svg>
                <div class="name">down-line</div>
                <div class="code-name">#icon-down-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download-line"></use>
                </svg>
                <div class="name">download-line</div>
                <div class="code-name">#icon-download-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dash-board-line"></use>
                </svg>
                <div class="name">dash-board-line</div>
                <div class="code-name">#icon-dash-board-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy-settings-filled"></use>
                </svg>
                <div class="name">copy-settings-filled</div>
                <div class="code-name">#icon-copy-settings-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit-filled"></use>
                </svg>
                <div class="name">edit-filled</div>
                <div class="code-name">#icon-edit-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit-text-line"></use>
                </svg>
                <div class="name">edit-text-line</div>
                <div class="code-name">#icon-edit-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-email-filled"></use>
                </svg>
                <div class="name">email-filled</div>
                <div class="code-name">#icon-email-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-email-line"></use>
                </svg>
                <div class="name">email-line</div>
                <div class="code-name">#icon-email-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit-line"></use>
                </svg>
                <div class="name">edit-line</div>
                <div class="code-name">#icon-edit-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-filled"></use>
                </svg>
                <div class="name">file-filled</div>
                <div class="code-name">#icon-file-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-line"></use>
                </svg>
                <div class="name">file-line</div>
                <div class="code-name">#icon-file-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-failure-line"></use>
                </svg>
                <div class="name">failure-line</div>
                <div class="code-name">#icon-failure-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favorite-filled"></use>
                </svg>
                <div class="name">favorite-filled</div>
                <div class="code-name">#icon-favorite-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favorite-line"></use>
                </svg>
                <div class="name">favorite-line</div>
                <div class="code-name">#icon-favorite-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exchange-line"></use>
                </svg>
                <div class="name">exchange-line</div>
                <div class="code-name">#icon-exchange-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-export-line"></use>
                </svg>
                <div class="name">export-line</div>
                <div class="code-name">#icon-export-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter-filled"></use>
                </svg>
                <div class="name">filter-filled</div>
                <div class="code-name">#icon-filter-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filler-line"></use>
                </svg>
                <div class="name">filler-line</div>
                <div class="code-name">#icon-filler-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fold-line"></use>
                </svg>
                <div class="name">fold-line</div>
                <div class="code-name">#icon-fold-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-line"></use>
                </svg>
                <div class="name">folder-line</div>
                <div class="code-name">#icon-folder-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-user-line"></use>
                </svg>
                <div class="name">delete-user-line</div>
                <div class="code-name">#icon-delete-user-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-filled"></use>
                </svg>
                <div class="name">folder-filled</div>
                <div class="code-name">#icon-folder-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-open-filled"></use>
                </svg>
                <div class="name">folder-open-filled</div>
                <div class="code-name">#icon-folder-open-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-open-line"></use>
                </svg>
                <div class="name">folder-open-line</div>
                <div class="code-name">#icon-folder-open-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-date-time-line"></use>
                </svg>
                <div class="name">date-time-line</div>
                <div class="code-name">#icon-date-time-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-form-filled"></use>
                </svg>
                <div class="name">form-filled</div>
                <div class="code-name">#icon-form-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-freeze-circle-filled"></use>
                </svg>
                <div class="name">freeze-circle-filled</div>
                <div class="code-name">#icon-freeze-circle-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help-circle-filled"></use>
                </svg>
                <div class="name">help-circle-filled</div>
                <div class="code-name">#icon-help-circle-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-form-line"></use>
                </svg>
                <div class="name">form-line</div>
                <div class="code-name">#icon-form-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hierarchical-list-filled"></use>
                </svg>
                <div class="name">hierarchical-list-filled</div>
                <div class="code-name">#icon-hierarchical-list-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help-circle-line"></use>
                </svg>
                <div class="name">help-circle-line</div>
                <div class="code-name">#icon-help-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-half-star-filled"></use>
                </svg>
                <div class="name">half-star-filled</div>
                <div class="code-name">#icon-half-star-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home-filled"></use>
                </svg>
                <div class="name">home-filled</div>
                <div class="code-name">#icon-home-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hierarchical-list-line"></use>
                </svg>
                <div class="name">hierarchical-list-line</div>
                <div class="code-name">#icon-hierarchical-list-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-image-filled"></use>
                </svg>
                <div class="name">image-filled</div>
                <div class="code-name">#icon-image-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Indent-list-filled"></use>
                </svg>
                <div class="name">Indent-list-filled</div>
                <div class="code-name">#icon-Indent-list-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home-line"></use>
                </svg>
                <div class="name">home-line</div>
                <div class="code-name">#icon-home-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-import-line"></use>
                </svg>
                <div class="name">import-line</div>
                <div class="code-name">#icon-import-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info-circle-filled"></use>
                </svg>
                <div class="name">info-circle-filled</div>
                <div class="code-name">#icon-info-circle-filled</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
